/**
 * 虚拟列表组件
 * 
 * 功能描述：
 * - 高性能处理大量数据的虚拟滚动列表
 * - 只渲染可见区域的项目，提升性能
 * - 支持固定高度的列表项
 * - 提供滚动事件和到达底部回调
 * 
 * 使用场景：
 * - 长列表数据展示（如聊天记录、商品列表等）
 * - 需要高性能滚动的场景
 * - 移动端大量数据展示
 * 
 * 作者：系统
 * 创建时间：2024
 */

import React, { useState, useCallback, useMemo } from 'react';

// 虚拟列表的Props接口
interface VirtualListProps<T> {
  data: T[]; // 数据源
  renderItem: (item: T, index: number) => React.ReactNode; // 渲染函数
  itemHeight: number; // 项目高度
  containerHeight: number; // 容器高度
  overscan?: number; // 预渲染的项目数量
  className?: string; // 容器类名
  style?: React.CSSProperties; // 容器样式
  onScroll?: (scrollTop: number) => void; // 滚动回调
  onReachEnd?: () => void; // 到达底部回调
}

// 简化的虚拟列表组件
export function VirtualList<T>({
  data,
  renderItem,
  itemHeight,
  containerHeight,
  overscan = 5,
  className = '',
  style = {},
  onScroll,
  onReachEnd
}: VirtualListProps<T>) {
  const [scrollTop, setScrollTop] = useState(0);

  // 计算总高度
  const totalHeight = data.length * itemHeight;

  // 计算可见范围
  const visibleRange = useMemo(() => {
    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
    const endIndex = Math.min(
      data.length,
      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
    );
    return { startIndex, endIndex };
  }, [scrollTop, containerHeight, data.length, itemHeight, overscan]);

  // 计算偏移量
  const offsetY = visibleRange.startIndex * itemHeight;

  // 滚动处理
  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const scrollTop = e.currentTarget.scrollTop;
    setScrollTop(scrollTop);
    onScroll?.(scrollTop);
    
    // 检查是否到达底部
    if (scrollTop + containerHeight >= totalHeight - 1) {
      onReachEnd?.();
    }
  }, [onScroll, onReachEnd, containerHeight, totalHeight]);

  // 渲染可见项目
  const visibleItems = useMemo(() => {
    const items: React.ReactNode[] = [];
    for (let i = visibleRange.startIndex; i < visibleRange.endIndex; i++) {
      if (i < data.length) {
        items.push(
          <div key={i} style={{ height: itemHeight }}>
            {renderItem(data[i], i)}
          </div>
        );
      }
    }
    return items;
  }, [data, visibleRange, renderItem, itemHeight]);

  // 空数据状态
  if (data.length === 0) {
    return (
      <div className={className} style={{ height: containerHeight, ...style }}>
        <div className="flex items-center justify-center h-full text-gray-500">
          暂无数据
        </div>
      </div>
    );
  }

  return (
    <div
      className={className}
      style={{
        height: containerHeight,
        width: '100%',
        position: 'relative',
        overflow: 'hidden',
        ...style
      }}
    >
      {/* 滚动容器 */}
      <div
        style={{
          height: '100%',
          overflow: 'auto',
          position: 'relative'
        }}
        onScroll={handleScroll}
      >
        {/* 内容容器 */}
        <div style={{ height: totalHeight, position: 'relative' }}>
          {/* 偏移量占位 */}
          <div style={{ height: offsetY }} />
          
          {/* 可见项目 */}
          <div style={{ position: 'absolute', top: offsetY, left: 0, right: 0 }}>
            {visibleItems}
          </div>
        </div>
      </div>
    </div>
  );
}

export default VirtualList; 